<template>

  <el-table :data="state.tableData.data"
            v-loading="state.tableData.loading"
            stripe
            border>
    <el-table-column v-for="column in state.tableData.header" align="center" :min-width="column.width" :key="column.column" :label="column.columnName" :prop="column.column">
      <el-table-column  v-if="column.children?.length > 0" v-for="(item,index) in column.children" align="center" :min-width="item.width" :key="index" :label="item.columnName" :prop="item.column"></el-table-column>
    </el-table-column>
  </el-table>
</template>
<script setup name="table">
 import RecursiveTableHeader from "@/components/RecursiveTableHeader";


const state = reactive({
  tableData: {
    loading: false,
    header: [
      {
        column: "dim1",
        columnName: "堆型",
        width: "100px",
        children: [],
      },
      {
        column: "dim2",
        columnName: "发电功率",
        width: "100px",
        children: [],
      },
      {
        column: "dim3",
        columnName: "机组寿命",
        width: "100px",
        children: [],
      },
      {
        column: "dim4",
        columnName: "装机成本",
        width: "100px",
        children: [],
      },
      {
        column: "2019",
        columnName: "2019年",
        width: "560px",
        children: [
          {
            column: "2019kf1",
            columnName: "核电装机容量（二代及三代大堆）",
            width: "280px",
            children: [],
          },
          {
            column: "2019kf2",
            columnName: "核电装机容量（三代小堆）",
            width: "280px",
            children: [],
          },
          {
            column: "2019kf3",
            columnName: "核电装机容量（四代堆（高温堆））",
            width: "280px",
            children: [],
          },
        ],
      },{
        column: "2024",
        columnName: "2024年",
        width: "560px",
        children: [
          {
            column: "2024kf1",
            columnName: "核电装机容量（二代及三代大堆）",
            width: "280px",
            children: [],
          },
          {
            column: "2024kf2",
            columnName: "核电装机容量（三代小堆）",
            width: "280px",
            children: [],
          },
          {
            column: "2024kf3",
            columnName: "核电装机容量（四代堆（高温堆））",
            width: "280px",
            children: [],
          },
        ],
      }
    ],
    data: [{
      dim1: '华龙一号',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    }, {
      dim1: 'AP1000',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    }, {
      dim1: '二代小堆',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    }, {
      dim1: '快堆',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    }]
  }
});

</script>